<template>
  <div>
    <!-- 歌单信息 -->
    <div class="info" v-if="title">
      <h3>{{ title }}<span>{{ songNum }}首歌</span></h3>
      <span v-if="playCount">播放：{{ playCount }}次</span>
    </div>
    <!-- 歌单列表 -->
    <el-table :data="songs" stripe>
      <el-table-column width="74">
        <template v-slot="scope">
          <span>{{ scope.$index + 1 }}</span>
          <i class="el-icon-video-play" style="margin-left: 5px" @click="changeMusic(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column label="歌曲标题" width="235" show-overflow-tooltip>
        <template v-slot="{row}">
          <span style="cursor: pointer" @click="toSongDetail(row)">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时长" width="111">
        <template v-slot="{row}">
          {{ formatSongTime(row.dt) }}
        </template>
      </el-table-column>
      <el-table-column label="歌手" width="89" show-overflow-tooltip>
        <template v-slot="{row}">
            <span v-for="(singer,index) in row.ar" :key="singer.id">
              <i v-if="index>0">/ </i>{{ singer.name }}
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="al.name" label="专辑" width="180" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {formatSongTime} from '@/utils'

export default {
  name: "SongList",
  props: ['title', 'songNum', 'playCount', 'songs'],
  methods: {
    formatSongTime,
    // 改变当前播放的歌曲
    changeMusic(music) {
      this.$bus.$emit('changeMusic', music)
    },
    toSongDetail(song) {
      this.$router.push({
        path: '/songdetail',
        query: {
          ids: song.id, // 传歌曲id过去，通过歌曲id获取歌曲信息避免页面刷新丢失数据
          title: song.name
        },
      })
    }
  },
}
</script>

<style scoped lang="less">
.info {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 2px solid #C20C0C;

  span {
    font-size: 12px;
  }

  h3 span {
    margin-left: 15px;
  }
}
</style>